<template>
  <div class="login">
    <h1>登录</h1>
    <form>
      <label for="id">账号：</label>
      <input id="id" type="text" v-model="user.userId"/>
      <br>
      <label for="password">密码：</label>
      <input id="password" type="password" v-model="user.password"/>
    </form>

    <br>

    <button @click="loginClick">登录</button>
    <router-link to="/register">
      <button>注册</button>
    </router-link>

    <div class="error">
      <p>{{ error }}</p>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    name: 'VLogin',
    data(){
      return {
        user: {
          userId: '',
          password: ''
        },
        error: ''
      }
    },
    mounted(){
      this.$nextTick(() => {

      })
    },
    methods: {
      loginClick(){
        this.error = "";
        let userId = this.user.userId;
        let password = this.user.password;

        if (userId.trim() === '' || password.trim() === '') {
          this.error = "输入为空！";
          return false;
        }

        this.$$post('/user/login', {
          userId: userId,
          password: password
        })
          .then((res) => {
            if (res.data.code === 1) {
              this.error = '登录成功！';
              this.$router.push('/index');
            } else
              this.error = res.data.msg;
          })
          .catch((err) => {
            /*出现其他异常*/
            this.error = err;
          })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .login {
    text-align center
    padding 30px
    background-color whitesmoke

    input {
      height 30px
      border 1px solid #c2c2c2
      border-radius 3px
      margin 10px
      padding-left 3px

      transition border, box-shadow 0.5s, 0.5s ease, ease

      &:hover {
        border 1px solid rgb(81, 203, 238)
        box-shadow 0 0 5px rgba(81, 203, 238, 0.5)
      }
    }

    .error {
      p {
        color red
        padding 20px
      }
    }
  }
</style>
